import { Button, Form, Input, type FormProps } from "antd"
import Centerimg from '../../assets/images/loginCenter.jpg'
import '../../assets/css/login/loginCenter.less'
import code from '../../assets/images/code.jpg'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom"
import { useEffect, useState } from "react"
import { getCode, login } from "../../apis/login";
import { useDispatch } from "react-redux";
type FieldType = {
    username?: string;
    pass?: string;
    verifyCode?: string;
};

let token = ''
let navigate: any

function LoginForm() {
    const dispatch = useDispatch();
    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        if (!values.username || !values.pass || !values.verifyCode) {
            console.error('表单字段缺失');
            return;
        }
        let value = {
            username: values.username,
            pass: values.pass,
            token: token,
            verifyCode: values.verifyCode
        }

        let res = await login(value)
        if (res.errCode == 10000) {
            dispatch({ type: 'TOKEN', data: res.data.token })
            dispatch({ type: 'MENU', data: res.data.menu })
            navigate(`/index`)
        }
    };
    navigate = useNavigate();
    // 图片验证
    const [img, setImg] = useState("获取图片失败")
    const LoginCode = async () => {
        let res = await getCode()
        setImg(res.imageCode!)
        token = res.token as string
        console.log(res);
    };
    useEffect(() => {
        LoginCode()
    }, [])
    return (
        <div className="loginfrom">
            <img src={Centerimg} alt="" />
            <div className="form">
                <h2>账号登录</h2>
                <div className="code">
                    <img src={code} alt="" className="codeimg" />
                </div>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}

                    autoComplete="off"
                    className="FormList"
                >
                    <Form.Item<FieldType>
                        name="username"
                        rules={[{ required: true, message: '账号不能为空' }]}
                    >
                        <Input placeholder="请输入账号" allowClear prefix={<UserOutlined />} style={{ height: '50px', width: '350px' }} />
                    </Form.Item>

                    <Form.Item<FieldType>
                        name="pass"
                        rules={[{ required: true, message: '请输入正确的密码' }]}

                    >
                        <Input.Password placeholder="请输入密码" style={{ height: '50px', width: '350px' }} prefix={<LockOutlined />} allowClear />
                    </Form.Item>
                    <div className="codeStyle">
                        <Form.Item<FieldType>
                            name='verifyCode'
                            rules={[{ required: true, message: '验证码错误' }]}
                        >
                            <Input placeholder="请输入验证码" style={{ height: '50px', width: '150px' }} />

                        </Form.Item>
                        <img src={img} alt="" className="codeImage" onClick={() => LoginCode()} />
                    </div>
                    <div className="pass">忘记密码?</div>
                    <Form.Item label={null} >
                        <Button type="primary" htmlType="submit" className="LoginButton" >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        </div>

    )

}
export default LoginForm